<!DOCTYPE html>
<html>
<header>
    <style>
        html {
          background: black;
        }
        .container {
          width: 300px;
          height: 300px;
        }
        .main1 {
          width: 500px;
          height: 500px;
          transform: translateZ(-150px);
          transform-style: preserve-3d;
        }
        .main2 {
          width: 300px;
          height: 300px;
          transform-style: preserve-3d;
          transform: rotateX(60deg);
          position: relative;
        }
        .flex {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .positon {
          position: absolute;
        }
        .center {
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
        .firstCircle {
          width: 400px;
          height: 400px;
          border-radius: 50%;
          border: 3px solid rgb(42, 153, 255);
        }
        .secondCircle {
          width: 350px;
          height: 350px;
          border-radius: 50%;
          border: 10px solid rgb(42, 153, 255);
          border-color: rgb(42, 153, 255) transparent;
  
          animation: rotate1 3s linear infinite;
        }
        .thirdCircle {
        }
        .fourthCircle {
          width: 300px;
          height: 300px;
          transform: translateX(-50%) translateY(-50%) translateZ(30px);
          animation: rotate2 3s linear infinite;
        }
        .annulusContent {
          width: 100%;
          height: 100%;
          position: relative;
          transform-style: preserve-3d;
        }
        .bar {
          width: 280px;
          height: 300px;
          background: transparent;
          top: 50%;
          left: 50%;
          transform: translateZ(150px) translateX(-50%) translateY(-50%)
            rotateX(90deg);
          display: flex;
          gap: 20px;
          overflow: hidden;
        }
        .line {
          width: 3px;
          height: 100px;
          background: linear-gradient(
            to top,
            rgb(69, 164, 254),
            rgba(42, 153, 255, 0.1)
          );
        }
        .line1 {
          animation: line1 1s linear infinite;
        }
        .line2 {
          animation: line1 0.5s 0.2s linear infinite;
        }
        .line3 {
          animation: line1 1.5s 0.5s linear infinite;
        }
        .line4 {
          animation: line1 1.3s 1s linear infinite;
        }
        .line5 {
          animation: line1 1.6s 0.3s linear infinite;
        }
        .line6 {
          animation: line1 2s 0.4s linear infinite;
        }
        .line7 {
          animation: line1 1.2s 0.6s linear infinite;
        }
        .line8 {
          animation: line1 1.1s 1.1s linear infinite;
        }
        .line9 {
          animation: line1 1.9s 0.9s linear infinite;
        }
        .line10 {
          animation: line1 1.7s 1.3s linear infinite;
        }
        .line11 {
          animation: line1 1.3s 1.1s linear infinite;
        }
        .line12 {
          animation: line1 1.4s 0.4s linear infinite;
        }
        .annulus {
          width: 300px;
          height: 300px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          background: conic-gradient(
            rgb(69, 164, 254) 0,
            rgb(69, 164, 254) 2%,
            transparent 2%
          );
          border-radius: 50%;
          -webkit-mask: radial-gradient(
            transparent,
            transparent 57%,
            #000 57%,
            #000 100%
          );
        }
        .annulus1 {
          transform: translateX(-50%) translateY(-50%) rotateZ(10deg);
        }
        .annulus2 {
          transform: translateX(-50%) translateY(-50%) rotateZ(20deg);
        }
        .annulus3 {
          transform: translateX(-50%) translateY(-50%) rotateZ(30deg);
        }
        .annulus4 {
          transform: translateX(-50%) translateY(-50%) rotateZ(40deg);
        }
        .annulus5 {
          transform: translateX(-50%) translateY(-50%) rotateZ(50deg);
        }
        .annulus6 {
          transform: translateX(-50%) translateY(-50%) rotateZ(60deg);
        }
        .annulus7 {
          transform: translateX(-50%) translateY(-50%) rotateZ(70deg);
        }
        .annulus8 {
          transform: translateX(-50%) translateY(-50%) rotateZ(80deg);
        }
        .annulus9 {
          transform: translateX(-50%) translateY(-50%) rotateZ(90deg);
        }
        .annulus10 {
          transform: translateX(-50%) translateY(-50%) rotateZ(100deg);
        }
        .annulus11 {
          transform: translateX(-50%) translateY(-50%) rotateZ(110deg);
        }
        .annulus12 {
          transform: translateX(-50%) translateY(-50%) rotateZ(120deg);
        }
        .annulus13 {
          transform: translateX(-50%) translateY(-50%) rotateZ(130deg);
        }
        .annulus14 {
          transform: translateX(-50%) translateY(-50%) rotateZ(140deg);
        }
        .annulus15 {
          transform: translateX(-50%) translateY(-50%) rotateZ(150deg);
        }
        .annulus16 {
          transform: translateX(-50%) translateY(-50%) rotateZ(160deg);
        }
        .annulus17 {
          transform: translateX(-50%) translateY(-50%) rotateZ(170deg);
        }
        .annulus18 {
          transform: translateX(-50%) translateY(-50%) rotateZ(180deg);
        }
        .annulus19 {
          transform: translateX(-50%) translateY(-50%) rotateZ(190deg);
        }
        .annulus20 {
          transform: translateX(-50%) translateY(-50%) rotateZ(200deg);
        }
        .annulus21 {
          transform: translateX(-50%) translateY(-50%) rotateZ(210deg);
        }
        .annulus22 {
          transform: translateX(-50%) translateY(-50%) rotateZ(220deg);
        }
        .annulus23 {
          transform: translateX(-50%) translateY(-50%) rotateZ(230deg);
        }
        .annulus24 {
          transform: translateX(-50%) translateY(-50%) rotateZ(240deg);
        }
        .annulus25 {
          transform: translateX(-50%) translateY(-50%) rotateZ(250deg);
        }
        .annulus26 {
          transform: translateX(-50%) translateY(-50%) rotateZ(260deg);
        }
        .annulus27 {
          transform: translateX(-50%) translateY(-50%) rotateZ(270deg);
        }
        .annulus28 {
          transform: translateX(-50%) translateY(-50%) rotateZ(280deg);
        }
        .annulus29 {
          transform: translateX(-50%) translateY(-50%) rotateZ(290deg);
        }
        .annulus30 {
          transform: translateX(-50%) translateY(-50%) rotateZ(300deg);
        }
        .annulus31 {
          transform: translateX(-50%) translateY(-50%) rotateZ(310deg);
        }
        .annulus32 {
          transform: translateX(-50%) translateY(-50%) rotateZ(320deg);
        }
        .annulus33 {
          transform: translateX(-50%) translateY(-50%) rotateZ(330deg);
        }
        .annulus34 {
          transform: translateX(-50%) translateY(-50%) rotateZ(340deg);
        }
        .annulus35 {
          transform: translateX(-50%) translateY(-50%) rotateZ(350deg);
        }
        .annulus36 {
          transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
        }
        @keyframes rotate1 {
          0% {
            transform: translateZ(20px) translateX(-50%) translateY(-50%)
              rotateZ(0deg);
          }
          100% {
            transform: translateZ(20px) translateX(-50%) translateY(-50%)
              rotateZ(-360deg);
          }
        }
        @keyframes rotate2 {
          0% {
            transform: translateX(-50%) translateY(-50%) translateZ(30px)
              rotateZ(0deg);
          }
          100% {
            transform: translateX(-50%) translateY(-50%) translateZ(30px)
              rotateZ(360deg);
          }
        }
  
        @keyframes line1 {
          0% {
            transform: translateY(-220px);
          }
          100% {
            transform: translateY(220px);
          }
        }
      </style>
</header>

<body>
    <div class="container">
        <div class="main1 flex">
            <div class="main2">
                <div class="firstCircle positon center"></div>
                <div class="secondCircle positon center"></div>
                <div class="fourthCircle flex positon center">
                    <div class="annulusContent">
                        <div class="annulus annulus1"></div>

                        <div class="annulus annulus2"></div>
                        <div class="annulus annulus3"></div>
                        <div class="annulus annulus4"></div>
                        <div class="annulus annulus5"></div>
                        <div class="annulus annulus6"></div>
                        <div class="annulus annulus7"></div>
                        <div class="annulus annulus8"></div>
                        <div class="annulus annulus9"></div>
                        <div class="annulus annulus10"></div>
                        <div class="annulus annulus11"></div>
                        <div class="annulus annulus12"></div>
                        <div class="annulus annulus13"></div>
                        <div class="annulus annulus14"></div>
                        <div class="annulus annulus15"></div>
                        <div class="annulus annulus16"></div>
                        <div class="annulus annulus17"></div>
                        <div class="annulus annulus18"></div>
                        <div class="annulus annulus19"></div>
                        <div class="annulus annulus20"></div>
                        <div class="annulus annulus21"></div>
                        <div class="annulus annulus22"></div>
                        <div class="annulus annulus23"></div>
                        <div class="annulus annulus24"></div>
                        <div class="annulus annulus25"></div>
                        <div class="annulus annulus26"></div>
                        <div class="annulus annulus27"></div>
                        <div class="annulus annulus28"></div>
                        <div class="annulus annulus29"></div>
                        <div class="annulus annulus30"></div>
                        <div class="annulus annulus31"></div>
                        <div class="annulus annulus32"></div>
                        <div class="annulus annulus33"></div>
                        <div class="annulus annulus34"></div>
                        <div class="annulus annulus35"></div>
                        <div class="annulus annulus36"></div>
                    </div>
                </div>
                <div class="bar positon flex">
                    <div class="line line1"></div>
                    <div class="line line2"></div>
                    <div class="line line3"></div>
                    <div class="line line4"></div>
                    <div class="line line5"></div>
                    <div class="line line6"></div>
                    <div class="line line7"></div>
                    <div class="line line8"></div>
                    <div class="line line9"></div>
                    <div class="line line10"></div>
                    <div class="line line11"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var elem = document.querySelector('.main1')
      var isDragging = false // 用于判断是否正在拖动
      var initialX = 0 // 初始鼠标X坐标
      var initialY = 0 // 初始鼠标Y坐标
      var currentX = 0 // 当前鼠标X坐标
      var currentY = 0 // 当前鼠标Y坐标
      var initialRotationY = 0 // 初始旋转角度（Y轴）
      var initialRotationX = 0 // 初始旋转角度（X轴）

      elem.addEventListener('mousedown', function (e) {
        // 当鼠标按下时
        initialY = e.clientY // 获取初始鼠标Y坐标
        initialRotationY = parseInt(
          getComputedStyle(elem)
            .getPropertyValue('transform')
            .replace(/[^0-9-.,]/g, '')
            .split(',')[4]
        ) // 获取初始旋转角度（Y轴）
        initialRotationX = parseInt(
          getComputedStyle(elem)
            .getPropertyValue('transform')
            .replace(/[^0-9-.,]/g, '')
            .split(',')[5]
        ) // 获取初始旋转角度（X轴）
        isDragging = true // 设置isDragging为true，表示正在拖动
      })

      document.addEventListener('mousemove', function (e) {
        // 当鼠标移动时
        if (isDragging) {
          // 如果正在拖动
          currentY = e.clientY // 获取当前鼠标Y坐标
          var dy = currentY - initialY // Y轴方向移动的距离
          var newRotationY = initialRotationY + dy * -1 // 根据移动方向计算新的旋转角度（Y轴）
          console.log(111, dy)

          elem.style.transform = 'rotateX(' + newRotationY + 'deg)' // 设置元素的旋转角度
        }
      })

      document.addEventListener('mouseup', function () {
        // 当鼠标松开时
        isDragging = false // 设置isDragging为false，表示已经停止拖动
      })
    </script>
</body>

</html>